import React from "react"
import { type BaseEventOrig, Image, View, Button } from "@tarojs/components"
import clsx from "clsx"
import Taro from "@tarojs/taro"
import { Backdrop, Input, Picker, Popup, Space } from "@taroify/core"
import { ArrowDown, StarOutlined, Cross, LocationOutlined } from "@taroify/icons"
import GpContainer from "@/components/GpContainer"
import GpVerticelLine from "@/components/GpVerticelLine"
import GpNavbar from "@/components/GpNavbar"
import GpJumpNavs from "@/components/GpJumpNavs"
import { type InputProps } from "@tarojs/components/types/Input"
import { getPosition } from "@/platform/getPosition"
import { districts, type ICalculateExtraParams, type IStaticDistrict } from "./data"
import calculator_bg from "./images/calculator_bg.png"
import calculator_gradiant from "./images/calculator_gradiant.png"
import clickImg from "./images/click.png"
import modalImg from "./images/modalImg.png"
import recalc from "./images/recalc.png"
import contact from "./images/contact.png"
import nocalcdata from "./images/nocalcdata.png"
// import contactQRcode from "./images/contactQRcode.png"
import shareImg from "./images/share.png"
import examShake from "./images/examShake.png"
import styles from "./index.module.scss"

const enum EScoreType {
  /** 综合分 */
  zonghe = 1,
  /** 文化分 */
  wenhua = 2,
  /** 专业分 */
  prof = 3
}
const filterTabs: IOption<EScoreType>[] = [
  { value: EScoreType.zonghe, text: "综合分计算" },
  { value: EScoreType.wenhua, text: "文化分计算" },
  { value: EScoreType.prof, text: "专业分计算" }
]
type ProfTypeOption = IStaticDistrict["profTypes"][number]
type ICalcInfo = {
  year: number
  desc: string
  score: string
  list: Array<IOption>
  contactBtn: boolean
  contactBtnText: string
}
type IState = {
  filterTab: EScoreType
  profType: ProfTypeOption | null
  pendingProfType: ProfTypeOption | null
  /** 文化分 */
  secondValue: string
  /** 专业分 */
  thirdValue: string
  openDistricts: boolean
  openProfType: boolean
  district: IStaticDistrict | null
  openScoreModal: boolean
  calcInfo: ICalcInfo | null
  extraValue: string
  computeWay: IOption | null
  pendingComputeWay: IOption | null
  openComputeWay: boolean
  openContactModal: boolean
  isScroll: boolean
}
/**
 * @page 算分神器
 * @class
 */
class Calculator extends React.Component<unknown, IState> {
  fuckShakingTimer: NodeJS.Timeout
  constructor(props) {
    super(props)
    this.state = {
      filterTab: EScoreType.zonghe,
      profType: null,
      pendingProfType: null,
      secondValue: "",
      thirdValue: "",
      openDistricts: false,
      openProfType: false,
      district: null,
      openScoreModal: false,
      calcInfo: null,
      extraValue: "",
      computeWay: null,
      pendingComputeWay: null,
      openComputeWay: false,
      openContactModal: false,
      isScroll: false
    }
  }
  onShareAppMessage() {
    return {
      title: "综合分计算器"
    }
  }
  onPageScroll() {
    if (process.env.TARO_ENV === "weapp") {
      if (!this.state.isScroll) {
        this.setState({
          isScroll: true
        })
      }
      this.fuckShakingTimer && clearTimeout(this.fuckShakingTimer)
      this.fuckShakingTimer = setTimeout(() => {
        clearTimeout(this.fuckShakingTimer)
        this.setState({
          isScroll: false
        })
      }, 800)
    }
  }
  onLoad() {
    this.tryGetPosition()
  }
  tryGetPosition = async () => {
    try {
      const info = await getPosition()
      const finder = districts.find(l => info.province.indexOf(l.text) !== -1)
      console.info("[Calculator] tryGetPosition", info)
      if (finder) {
        this.setState({
          district: finder
        })
      } else {
        this.fallbackPosition()
      }
    } catch {
      this.fallbackPosition()
    }
  }
  /**
   * fallback to guangdong
   */
  fallbackPosition = () => {
    const district = districts.find(l => l.text === "广东")
    if (district) {
      this.setState({
        district
      })
    }
  }
  toggleContactModal = () => {
    this.setState({
      openContactModal: !this.state.openContactModal
    })
  }
  contactService = () => {
    this.closeScoreModal()
    this.toggleContactModal()
  }
  handleFilterTabChange = (filterValue: number) => {
    if (this.state.filterTab !== filterValue) {
      this.setState({
        filterTab: filterValue,
        secondValue: "",
        thirdValue: "",
        extraValue: ""
      })
    }
  }
  handleDistrictClose = () => {
    this.setState({
      openDistricts: false
    })
  }
  handleDistrictChange = (l: IStaticDistrict) => {
    const { district } = this.state
    if ((district && district.value === l.value) || l.disabled) return
    let _profType: IState["profType"] = null
    if (l.profTypes.length === 1) {
      _profType = l.profTypes[0]
    }
    this.setState({
      district: l,
      openDistricts: false,
      profType: _profType,
      pendingProfType: _profType,
      secondValue: "",
      thirdValue: "",
      extraValue: "",
      computeWay: null,
      pendingComputeWay: null
    })
  }
  openDistricts = () => {
    this.setState({
      openDistricts: true
    })
  }
  handleProfTypeCancel = () => {
    const { profType } = this.state
    this.setState({
      openProfType: false,
      pendingProfType: profType
    })
  }
  handleProfTypeConfirm = (values: number[]) => {
    const { district } = this.state
    if (!district) return
    const [value] = values
    const profType = district.profTypes.find(l => l.value === value)
    // @ts-ignore
    this.setState({ profType, pendingProfType: profType, openProfType: false })
  }
  handleProfTypeOptionChange = (value: number) => {
    console.info("change:", value)
    const { district } = this.state
    if (!district) return
    const profType = district.profTypes.find(l => l.value === value)
    // @ts-ignore
    this.setState({ pendingProfType: profType })
  }
  handleTriggerProfType = () => {
    const { district } = this.state
    if (!district) {
      Taro.showToast({
        title: "请先选择高考地区",
        icon: "none"
      })
      return
    }
    this.setState({
      openProfType: true
    })
  }
  handleComputeWayCancel = () => {
    const { computeWay } = this.state
    this.setState({
      openComputeWay: false,
      pendingComputeWay: computeWay
    })
  }
  handleComputeWayConfirm = (values: number[]) => {
    const { district } = this.state
    if (!district) return
    const [value] = values
    // @ts-ignore
    const computeWay = district.computeWays.find(l => l.value === value)
    // @ts-ignore
    this.setState({ computeWay, pendingComputeWay: computeWay, openComputeWay: false })
  }
  handleComputeWayOptionChange = (value: number) => {
    const { district } = this.state
    if (!district) return
    // @ts-ignore
    const computeWay = district.computeWays.find(l => l.value === value)
    // @ts-ignore
    this.setState({ pendingComputeWay: computeWay })
  }
  handleTriggerComputeWay = () => {
    const { district } = this.state
    if (!district) {
      Taro.showToast({
        title: "请先选择高考地区",
        icon: "none"
      })
      return
    }
    this.setState({
      openComputeWay: true
    })
  }
  closeScoreModal = () => {
    this.setState({
      openScoreModal: false
    })
  }
  handleFormChange = (
    ev: BaseEventOrig<InputProps.inputEventDetail>,
    stateField: "secondValue" | "thirdValue" | "extraValue"
  ) => {
    // @ts-ignore
    this.setState({
      [stateField]: ev.detail.value
    })
  }
  handleCalculate = () => {
    if (!this.validateForm()) return
    const { profType, filterTab, secondValue, thirdValue, extraValue, district, computeWay } =
      this.state
    let desc = ""
    let score = "0"
    let contactBtn = false
    let contactBtnText = ""
    const list = [] as IOption[]
    const second = Number(secondValue)
    const third = Number(thirdValue)
    const extraParams: ICalculateExtraParams = {}
    const showExtra = district && district.showExtra
    const _extraValue = Number(extraValue) || 0
    if (showExtra) {
      extraParams.extra = _extraValue
    }
    const moreComputeWay = district && district.computeWays.length > 0
    if (moreComputeWay) {
      extraParams.computeWay = computeWay?.value
      list.push({
        text: "公式选择",
        value: computeWay?.text
      })
    }
    if (filterTab === EScoreType.zonghe) {
      desc = "高考综合分"
      score = profType?.calculator.zonghe(second, third, extraParams) as string
      contactBtn = false
      list.push(
        {
          text: "文化分",
          value: this.state.secondValue + "分"
        },
        {
          text: "专业分",
          value: this.state.thirdValue + "分"
        }
      )
    } else if (filterTab === EScoreType.wenhua) {
      desc = "你的文化分是"
      score = profType?.calculator.wenhua(second, third, extraParams) as string
      contactBtn = true
      contactBtnText = "文化课冲刺"
      list.push(
        {
          text: "综合分",
          value: this.state.secondValue + "分"
        },
        {
          text: "专业分",
          value: this.state.thirdValue + "分"
        }
      )
    } else if (filterTab === EScoreType.prof) {
      desc = "你的专业分是"
      score = profType?.calculator.prof(second, third, extraParams) as string
      contactBtn = true
      contactBtnText = "艺考集训"
      list.push(
        {
          text: "综合分",
          value: this.state.secondValue + "分"
        },
        {
          text: "文化分",
          value: this.state.thirdValue + "分"
        }
      )
    }
    if (district && district.showExtra) {
      list.push({
        text: "政策性加分",
        value: _extraValue + "分"
      })
    }
    this.setState({
      calcInfo: {
        year: district?.year as number,
        desc,
        score,
        list,
        contactBtn,
        contactBtnText
      },
      openScoreModal: true
    })
  }
  validateForm = () => {
    const { profType, secondValue, thirdValue, district, computeWay } = this.state
    if (!profType) {
      Taro.showToast({
        title: "请选择报考类别",
        icon: "none"
      })
      return false
    }
    if (district && district.computeWays.length > 0 && !computeWay) {
      Taro.showToast({
        title: "请选择公式",
        icon: "none"
      })
      return false
    }
    if (!secondValue || String(secondValue).trim().length === 0) {
      const labels = this.getFormLabels()
      Taro.showToast({
        title: labels.second.placeholder,
        icon: "none"
      })
      return false
    }
    if (!thirdValue || String(thirdValue).trim().length === 0) {
      const labels = this.getFormLabels()
      Taro.showToast({
        title: labels.third.placeholder,
        icon: "none"
      })
      return false
    }
    return true
  }
  getFormLabels = () => {
    const { filterTab } = this.state
    const labels = {
      second: {
        label: "",
        placeholder: ""
      },
      third: {
        label: "",
        placeholder: ""
      }
    }
    if (filterTab === EScoreType.zonghe) {
      labels.second.label = "文化课成绩"
      labels.second.placeholder = "请输入文化课成绩"
      labels.third.label = "专业课成绩"
      labels.third.placeholder = "请输入专业课成绩"
    } else if (filterTab === EScoreType.wenhua) {
      labels.second.label = "综合分成绩"
      labels.second.placeholder = "请输入综合分成绩"
      labels.third.label = "专业课成绩"
      labels.third.placeholder = "请输入专业课成绩"
    } else if (filterTab === EScoreType.prof) {
      labels.second.label = "综合分成绩"
      labels.second.placeholder = "请输入综合分成绩"
      labels.third.label = "文化课成绩"
      labels.third.placeholder = "请输入文化课成绩"
    }
    return labels
  }
  /** 联系企业微信客服 */
  contactQYService = () => {
    Taro.openCustomerServiceChat({
      extInfo: {
        url: "https://work.weixin.qq.com/kfid/kfc0d6c91fbff0a07af"
      },
      corpId: "wwaef59f2aa3a6b263"
    })
    return
  }
  renderPageBg = () => {
    return (
      <View className={styles.bgWrapper}>
        <View className={styles.bgBannerBox}>
          <Image mode="scaleToFill" src={calculator_bg} className={styles.bgBanner} />
        </View>
        <View className={styles.bgGradiantBox}>
          <Image mode="scaleToFill" src={calculator_gradiant} className={styles.bgGradiant} />
        </View>
      </View>
    )
  }
  renderPageContent = () => {
    return (
      <View className={styles.pageContent}>
        {this.renderCalculator()}
        {this.renderRules()}
        {/* {this.renderJumpNavs()} */}
      </View>
    )
  }
  renderCalculator = () => {
    const { filterTab, district } = this.state
    return (
      <View className={clsx(styles.contentCard, styles.calculator)}>
        <View className={styles.filterTabs}>
          {filterTabs.map(l => (
            <View
              key={l.value}
              className={clsx(styles.filterTab, {
                [styles.activeTab]: filterTab === l.value
              })}
              onClick={() => this.handleFilterTabChange(l.value)}
            >
              <View className={styles.filterTabText}>{l.text}</View>
              <View className={styles.filterTabLine}></View>
            </View>
          ))}
        </View>
        {district && !district.computable ? this.renderNoCalcData() : this.renderFilterForm()}
      </View>
    )
  }
  renderNoCalcData = () => {
    return (
      <View className={styles.noCalcData}>
        <Image src={nocalcdata} mode="scaleToFill" className={styles.noCalcDataImg} />
        <View className={styles.noCalcDataTitle}>暂时无法使用计算器</View>
        <View className={styles.noCalcDataDesc}>该省2024年统考综合分具体计算公式还未公布</View>
        <View className={styles.noCalcDataBtn} onClick={this.contactService}>
          <Image src={contact} mode="scaleToFill" className={styles.noCalcDataBtnIcon} />
          <View className={styles.noCalcDataBtnText}>文化课/艺考冲刺</View>
        </View>
      </View>
    )
  }
  renderFilterForm = () => {
    const { profType, secondValue, thirdValue, extraValue, district, computeWay } = this.state
    const labels = this.getFormLabels()
    const hasComputeWays = district && district.computeWays.length > 0
    return (
      <View className={styles.filterForm}>
        <View className={styles.filterFormControl} onClick={this.handleTriggerProfType}>
          <View className={styles.filterFormControlLabel}>专业类别</View>
          <GpVerticelLine height={34} color="#DDDDDD" />
          <View className={styles.filterFormControlValue}>
            <View
              className={clsx(styles.filterFormControlPlaceholder, {
                [styles.antiFilterFormControlPlaceholder]: profType?.text
              })}
            >
              {profType?.text || "请选择"}
            </View>
          </View>
          <ArrowDown size="medium" className={styles.filterFormControlIcon} />
        </View>
        <View>
          {hasComputeWays && (
            <View className={styles.filterFormControl} onClick={this.handleTriggerComputeWay}>
              <View className={styles.filterFormControlLabel}>公式选择</View>
              <GpVerticelLine height={34} color="#DDDDDD" />
              <View className={styles.filterFormControlValue}>
                <View
                  className={clsx(styles.filterFormControlPlaceholder, {
                    [styles.antiFilterFormControlPlaceholder]: computeWay?.text
                  })}
                >
                  {computeWay?.text || "请选择"}
                </View>
              </View>
              <ArrowDown size="medium" className={styles.filterFormControlIcon} />
            </View>
          )}
        </View>
        <View className={styles.filterFormControl}>
          <View className={styles.filterFormControlLabel}>{labels.second.label}</View>
          <GpVerticelLine height={34} color="#DDDDDD" />
          <View className={styles.filterFormControlValue}>
            <Input
              type="digit"
              value={secondValue}
              onChange={ev => this.handleFormChange(ev, "secondValue")}
              placeholder={labels.second.placeholder}
              className={styles.filterFormControlInput}
              placeholderClass={styles.filterFormControlPlaceholder}
              placeholderClassName={styles.filterFormControlPlaceholder}
              controlled={true}
              alwaysEmbed
              disabled={this.state.openContactModal || this.state.openScoreModal}
            />
          </View>
        </View>
        <View className={styles.filterFormControl}>
          <View className={styles.filterFormControlLabel}>{labels.third.label}</View>
          <GpVerticelLine height={34} color="#DDDDDD" />
          <View className={styles.filterFormControlValue}>
            <Input
              type="digit"
              value={thirdValue}
              onChange={ev => this.handleFormChange(ev, "thirdValue")}
              placeholder={labels.third.placeholder}
              className={styles.filterFormControlInput}
              placeholderClass={styles.filterFormControlPlaceholder}
              placeholderClassName={styles.filterFormControlPlaceholder}
              controlled={true}
              alwaysEmbed
              disabled={this.state.openContactModal || this.state.openScoreModal}
            />
          </View>
        </View>
        <View>
          {district?.showExtra && (
            <View className={styles.filterFormControl}>
              <View className={styles.filterFormControlLabel}>政策性加分</View>
              <GpVerticelLine height={34} color="#DDDDDD" />
              <View className={styles.filterFormControlValue}>
                <Input
                  type="digit"
                  value={extraValue}
                  onChange={ev => this.handleFormChange(ev, "extraValue")}
                  placeholder="请输入分值"
                  className={styles.filterFormControlInput}
                  placeholderClass={styles.filterFormControlPlaceholder}
                  placeholderClassName={styles.filterFormControlPlaceholder}
                  controlled={true}
                  alwaysEmbed
                  disabled={this.state.openContactModal || this.state.openScoreModal}
                />
              </View>
            </View>
          )}
        </View>
        <View className={clsx(styles.confirmBtn, styles.actionBtn)} onClick={this.handleCalculate}>
          <Image src={clickImg} mode="scaleToFill" className={styles.confirmIcon} />
          <View className={clsx(styles.confirmText, styles.actionBtnText)}>点击计算</View>
        </View>
        <Button openType="share" className={clsx(styles.shareBtn, styles.actionBtn)}>
          <Image
            src={shareImg}
            mode="scaleToFill"
            className={clsx(styles.confirmIcon, {
              [styles.shareIcon]: process.env.TARO_ENV === "swan"
            })}
          />
          <View className={clsx(styles.shareText, styles.actionBtnText)}>分享好友</View>
        </Button>
      </View>
    )
  }
  renderRules = () => {
    const { district } = this.state
    if (!district) return null
    return (
      <View className={clsx(styles.contentCard, styles.rules)}>
        <View className={styles.ruleHeader}>
          <GpVerticelLine width={6} height={32} color="#3775F6" />
          <View className={styles.ruleTitle}>
            {district.fullText}
            {district.year}年统考综合分计算公式
          </View>
        </View>
        <View className={styles.rulesList}>
          {district.rulesList.map((l, index) => (
            <View className={styles.rulesListItem} key={index}>
              <View className={styles.rulesProf}>{l.profs()}统考院校(专业)</View>
              <View className={styles.rulesDetail}>
                <View className={styles.rulesDetialTop}>
                  <StarOutlined size="medium" color="#999999" />
                  <View className={styles.rulesDetailTopText}>
                    {district.computable ? "综合得分" : "得分说明"}
                  </View>
                </View>
                {l.calculation()}
              </View>
            </View>
          ))}
        </View>
        <View className={styles.rulesOrigin}>*来源于{district.fullText}教育考试院</View>
      </View>
    )
  }
  renderJumpNavs = () => {
    return (
      <View className={clsx(styles.contentCard, styles.jumpNavs)}>
        <GpJumpNavs />
      </View>
    )
  }
  renderDistricts = () => {
    const { openDistricts, district } = this.state
    return (
      <Popup
        open={openDistricts}
        onClose={this.handleDistrictClose}
        rounded
        placement="bottom"
        style={{ minHeight: "30%", maxHeight: "80%" }}
      >
        <Popup.Close />
        <View className={styles.popupContent}>
          <View className={styles.districtTitle}>高考地区</View>
          <View className={styles.districtList}>
            <Space className={styles.districtListContainer}>
              {districts.map(l => (
                <View
                  key={l.value}
                  className={clsx(styles.districtListItem, {
                    [styles.disabled]: l.disabled,
                    [styles.selected]: district && district.value === l.value
                  })}
                  onClick={() => this.handleDistrictChange(l)}
                >
                  {l.text}
                </View>
              ))}
            </Space>
          </View>
        </View>
      </Popup>
    )
  }
  renderProfTypes = () => {
    const { openProfType, district, pendingProfType } = this.state
    if (!district || district.profTypes.length === 0) return null
    return (
      <Popup open={openProfType} rounded placement="bottom" onClose={this.handleProfTypeCancel}>
        <Picker
          value={pendingProfType?.value}
          onCancel={this.handleProfTypeCancel}
          onConfirm={this.handleProfTypeConfirm}
          onChange={this.handleProfTypeOptionChange}
        >
          <Picker.Toolbar>
            <Picker.Button>取消</Picker.Button>
            <Picker.Title>专业类别</Picker.Title>
            <Picker.Button>确认</Picker.Button>
          </Picker.Toolbar>
          <Picker.Column>
            {district.profTypes.map(l => (
              <Picker.Option key={l.value} value={l.value}>
                {l.text}
              </Picker.Option>
            ))}
          </Picker.Column>
        </Picker>
      </Popup>
    )
  }
  renderComputeWay = () => {
    const { openComputeWay, district, pendingComputeWay } = this.state
    if (!district) return null
    return (
      <Popup open={openComputeWay} rounded placement="bottom" onClose={this.handleComputeWayCancel}>
        <Picker
          value={pendingComputeWay?.value}
          onCancel={this.handleComputeWayCancel}
          onConfirm={this.handleComputeWayConfirm}
          onChange={this.handleComputeWayOptionChange}
        >
          <Picker.Toolbar>
            <Picker.Button>取消</Picker.Button>
            <Picker.Title>公式选择</Picker.Title>
            <Picker.Button>确认</Picker.Button>
          </Picker.Toolbar>
          <Picker.Column>
            {district.computeWays.map(l => (
              <Picker.Option key={l.value} value={l.value}>
                {l.text}
              </Picker.Option>
            ))}
          </Picker.Column>
        </Picker>
      </Popup>
    )
  }
  renderScoreModal = () => {
    const { openScoreModal, calcInfo, profType } = this.state
    if (!calcInfo) return null
    return (
      <Backdrop open={openScoreModal} closeable={false} catchMove>
        <View className={styles.scoreWrapper}>
          <View className={styles.scoreMain}>
            <View className={styles.scoreClose}>
              <Cross color="rgba(255,255,255,0.75)" size="large" onClick={this.closeScoreModal} />
            </View>
            <View className={styles.scoreImageWrapper}>
              <Image src={modalImg} mode="scaleToFill" className={styles.scoreImage} />
              <View className={styles.scoreText}>{calcInfo.desc}</View>
              <View className={styles.scoreShow}>
                <View className={styles.scoreNum}>{calcInfo.score}</View>
                <View className={styles.scoreUnit}>分</View>
              </View>
            </View>
            <View className={styles.scoreDetail}>
              <View className={styles.scoreDetailItem}>
                <View className={styles.scoreDetailLabel}>计算年份:</View>
                <View className={styles.scoreDetailValue}>{calcInfo.year}年</View>
              </View>
              <View className={styles.scoreDetailItem}>
                <View className={styles.scoreDetailLabel}>专业类别:</View>
                <View className={styles.scoreDetailValue}>{profType?.text}</View>
              </View>
              {calcInfo.list.map(l => (
                <View className={styles.scoreDetailItem} key={l.text}>
                  <View className={styles.scoreDetailLabel}>{l.text}:</View>
                  <View className={styles.scoreDetailValue}>{l.value}</View>
                </View>
              ))}
              <View
                className={clsx(styles.scoreBtn, styles.recalcBtn)}
                onClick={this.closeScoreModal}
              >
                <Image src={recalc} mode="scaleToFill" className={styles.btnIcon} />
                <View className={styles.btnText}>重新计算</View>
              </View>
              {calcInfo.contactBtn && (
                <View
                  className={clsx(styles.scoreBtn, styles.contactBtn)}
                  onClick={this.contactService}
                >
                  <Image src={contact} mode="scaleToFill" className={styles.btnIcon} />
                  <View className={styles.btnText}>{calcInfo.contactBtnText}</View>
                </View>
              )}
            </View>
          </View>
        </View>
      </Backdrop>
    )
  }
  renderContactModal = () => {
    const { openContactModal } = this.state
    return (
      <Backdrop open={openContactModal} closeable={false} catchMove>
        <View className={styles.contactWrapper}>
          <View className={styles.contactMain}>
            <View className={styles.contactClose}>
              <Cross
                color="rgba(255,255,255,0.75)"
                size="large"
                onClick={this.toggleContactModal}
              />
            </View>
            <View className={styles.contactDetail}>
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/qrwework.png"
                mode="scaleToFill"
                showMenuByLongpress={true}
                preview={true}
                className={styles.contactQRCode}
              />
              <View className={styles.contactDesc}>长按识别二维码</View>
              <View className={styles.contactDesc}>添加我的企业微信发起咨询</View>
            </View>
          </View>
        </View>
      </Backdrop>
    )
  }
  renderLeftExtra = () => {
    const { district } = this.state
    return (
      <View className={styles.navBarLeftExtra} onClick={this.openDistricts}>
        <LocationOutlined color="#333333" size={16} />
        <View className={styles.navBarLeftExtraText}>{district?.text}</View>
      </View>
    )
  }
  renderFuckShaking = () => {
    const { isScroll } = this.state
    return (
      <View
        className={styles.entry}
        style={{
          transform: isScroll ? "translateX(-65%)" : "translateX(0%)",
          opacity: isScroll ? 0.3 : 1
        }}
        onClick={this.contactQYService}
      >
        <Image src={examShake} mode="aspectFit" className={styles.entry_image}></Image>
      </View>
    )
  }
  render(): React.ReactNode {
    return (
      <GpContainer>
        <GpNavbar navigationBarTitleText="算分神器" renderLeftExtra={this.renderLeftExtra} />
        <View className={styles.calculatorPage}>
          {this.renderPageBg()}
          {this.renderPageContent()}
          {this.renderDistricts()}
          {this.renderProfTypes()}
          {this.renderComputeWay()}
          {this.renderScoreModal()}
          {this.renderContactModal()}
          {process.env.TARO_ENV === "weapp" ? this.renderFuckShaking() : null}
        </View>
      </GpContainer>
    )
  }
}
export default Calculator
